<template>
  <div class="fund-detail">
    <!-- 顶部标题栏 -->
    <div class="header-bar">
      <div class="header-content">
        <app-logo :small="true" class="header-logo" />
        <div class="back-button" @click="goBack">
          <i class="el-icon-arrow-left"></i> 返回列表
        </div>
      </div>
    </div>
    
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>
    
    <div v-else-if="fund" class="fund-info">
      <h2>{{ fund.name }} ({{ fund.code }})</h2>
      
      <el-descriptions title="基金信息" :column="2" border>
        <el-descriptions-item label="基金代码">{{ fund.code }}</el-descriptions-item>
        <el-descriptions-item label="基金类型">{{ fund.type }}</el-descriptions-item>
        <el-descriptions-item label="最新净值">{{ fund.nav.toFixed(4) }}</el-descriptions-item>
        <el-descriptions-item label="更新日期">{{ fund.updatedAt }}</el-descriptions-item>
      </el-descriptions>
      
      <div class="actions">
        <el-button type="primary" @click="viewPerformance">查看业绩</el-button>
      </div>
    </div>
    
    <div v-else class="error-container">
      <el-empty description="未找到基金信息" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import AppLogo from '../components/AppLogo.vue'

const route = useRoute()
const router = useRouter()
const fund = ref(null)
const loading = ref(true)

const loadFundDetail = async () => {
  loading.value = true
  try {
    const response = await axios.get(`/api/funds/${route.params.id}`)
    fund.value = response.data.fund
  } catch (error) {
    console.error('Failed to load fund details:', error)
    ElMessage.error('加载基金详情失败')
  } finally {
    loading.value = false
  }
}

const goBack = () => {
  router.push({ name: 'home' })
}

const viewPerformance = () => {
  router.push({ name: 'fundPerformance', params: { id: route.params.id } })
}

onMounted(() => {
  loadFundDetail()
})
</script>

<style scoped>
.fund-detail {
  min-height: 100vh;
  background-color: #fff;
}

.header-bar {
  background-color: #8086fd;
  color: white;
  padding: 15px 0;
  text-align: center;
  position: relative;
}

.header-bar h1 {
  margin: 0;
  font-size: 22px;
}

.loading-container, .error-container {
  max-width: 800px;
  margin: 40px auto;
}

.fund-info {
  max-width: 800px;
  margin: 20px auto;
}

.actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  position: relative;
}

.back-button {
  color: white;
  cursor: pointer;
  margin-left: 20px;
}

.header-logo {
  margin-right: 10px;
}
</style>